/* eslint-disable no-unused-vars */
import React, { Component } from 'react'
import styles from './index.module.css'
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
// import { getHousesCondition,getHousesByParams } from '../../../../api/index'
import { getHousesCondition } from '../../../../api/index'
import { getCurrentCity } from '../../../../utils/baiduMap' // 地图
export default class Filter extends Component {
  state = {
    count:'',
     list:[],
    // true 表示高亮； false 表示不高亮   // 标题高亮状态
    titleSelectedStatus : {
      area: false,
      mode: false,
      price: false,
      more: true
    } ,
    // 选中状态的索引值 传递给子组件
    activeIndex: -1,
    // 这里是筛选需要的数据
    filterCondition: {
      area: [],
      rent: [],
      price: [],
      more: [],
    },
    itemss:{},
    coose:1,
    filterData: {}, // 这里是存储
    filterTabs:{}
  }  
    // 请求参数变量
    params = {}
  // 这里横向筛选框 回传回来的id
  onTitleClick = (val) => {
    this.setState({
      filterTabs:val
    })
    const { filterCondition } = this.state
    // 用来判断是是否是  筛选
    if (val.type === 'more') {
      this.setState({
        activeIndex: -1
      })
    } else {
      Object.keys(filterCondition).forEach((item)=>{
        if (item === val.type) {
          console.log('我是idtm',val.cols);
          this.setState({
            itemss:filterCondition[item],
            coose:val.cols
          })
        console.log('我是sss',filterCondition[item]);
        }
      })

    console.log('我是sss',this.state.col);

      this.setState({
        activeIndex:val.id
      })
    } 
  }
  // 取消（隐藏对话框）
  onCancel = () => {
    this.setState({
      activeIndex: -1
    })
  }
  // 确定
  onSavef = () => {
    this.setState({
      activeIndex: -1
    })
    this.getHousesData()
  }
  // HormeScreen = async() => {
  //   const res = await getHousesCondition()
  // }
  async componentDidMount (){
        // 获取当前定位城市
        const { label: cityName, value: cityArea } = await getCurrentCity()
        // 获取房屋查询条件
        const res = await getHousesCondition(cityArea)
        // 解构出查询条件数据
        const { area, subway, rentType, price, roomType, oriented, floor, characteristic } = res.data.body
        console.log('zhegeshi ',res.data.body);
        // 处理成功项目页面中需要的数据结构
        const filterCondition = {}
        // 条件1：区域和地铁
        filterCondition.area = [area,subway]
        // 条件2：方式
        filterCondition.rent = rentType
        // 条件3：租金
        filterCondition.price = price
          // TODO 这里还有一个筛选选项内容没有处理
         this.setState({
          cityName, cityArea, filterCondition
         })
        //  this.getHousesData()
      }
      getHousesData=async()=>{
        // const res = await getHousesByParams(this.params)
        // // console.log(res)
        // // count 代表一共有多少套房源，list 就是房源列表数据
        // const { count, list } = res.data.body
        // console.log('sssss',res.data.body);
        // this.setState({ count, list })
        this.props.callback( this.params )
      }
      ClleChange=(value) =>{
          // 获取当前打开的到底是哪个选项卡
         const { filterTabs, activeIndex, filterData } = this.state
         const { type } = filterTabs
          // 把当前打开选项卡的 PickerView 数据存放起来
          filterData[type] = value

        //  this.setState({ filterData })
        //  console.log('这个是',filterData);
         this.getParams(type, value)
      }
      getParams=(openType, value)=>{
          console.log('openType',openType);
          console.log('value',value);
            // 为请求的接口准备对应的请求参数
           // 难点:处理第一个 PickView 的值
           if(openType === 'area'){
            // 因为区域和地铁，只能选择其一，所以先把旧的地铁和区域都删除掉
              delete this.params.area
              delete this.params.subway
              // 在添加区域或地铁的请求参数，
              //   键：第一个 PickView 的数组的第一项为请求的键名称
              //   值：如果 PickView 数组的第三个值为 null，我们就使用第二个值，否则才使用第三个值
              const key = value[0]
              const val = value[2] === 'null' ? value[1] : value[2]
              this.params[key] = val
            } else if (openType === 'rent') {
              this.params.rentType = value[0]
            } else if (openType === 'price') {
              this.params.price = value[0]
            } else if (openType === 'more') {
              this.params.more = value
            }
            // 如果是 null 值就不需要发送了这些参数
            for (const key in this.params) {
              this.params[key] === 'null' && delete this.params[key]
            }
            // 添加城市 id 限制，否则如果没选择条件的时候，返回的是全国的房源信息
            this.params.cityId = this.state.cityArea
            this.params.start = 1
            this.params.end = 20
            console.log('用于发送请求的参数', this.params)
          
      }
  render() {
    const { itemss,activeIndex,filterCondition,coose,filterData } = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        <div onClick={()=>{
          this.setState({
            activeIndex: -1
          })
        }} className={activeIndex > -1 ? styles.mask : ''} />

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle   filterCondition={filterCondition} activeIndex={activeIndex} callback={this.onTitleClick}/>
          {/* 前三个菜单对应的内容： */}
          {/* 这里如果在组件上添加判断，PickerView 这个组件里面的数据滑动会出现卡顿现象 */}
          {activeIndex > -1 ? (
            <FilterPicker filterData={filterData} callback={this.ClleChange} coose={coose} itemss={itemss} onCancel={this.onCancel} onSavef={this.onSavef}/>
          ) : (
           <div></div>
          )}
          {/* 最后一个菜单对应的内容： */}
          {/* <FilterMore /> */}
        </div>
      </div>
    )
  }
}
